<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>商品详情</title>
    <!-- <link rel="dns-prefetch" href=""> -->
    <link rel="stylesheet" href="css/lib/reset.css">
    <link rel="stylesheet" href="libs/swiper/swiper.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/lib/flexible-163.js"></script>
    <script src="js/lib/jquery-2.2.4.min.js"></script>
    <script src="libs/swiper/swiper.min.js"></script>
</head>

<body ontouchstart class="detail">
    <!-- 返回上一页 -->
    <div class="header">
        <a class="go-back" href="javascript:void(0)" onclick="history.go(-1)">返回</a>
        <h1 class="title">我的试用</h1>
        <span class="service">服务声明</span>
    </div>

    <div class="wrapper">
        <!-- 主体内容部分s -->
        <div class="container">
            <!-- 倒计时 -->
            <div class="timer-box">
                <p>剩余：123 天 01 时 42 分 39 秒后结束</p>
            </div>
            <!-- 顶部轮播 -->
            <div class="banner-box swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="" title="">
                            <img class="banner-img" src="images/banner-detail-pic.jpg" alt="">
                        </a>
                    </div>
                    <!-- <div class="swiper-slide">
                        <a href="" title="">
                            <img class="banner-img" src="images/banner-detail-pic.jpg" alt="">
                        </a>
                    </div> -->
                </div>
                <!-- 分页器 -->
                <div class="swiper-pagination"></div>
            </div>

            <!-- 商品信息 -->
            <div class="infos-box">
                <div class="infos-bd">
                    <span class="info-ico">免费试用</span>
                    <h2 class="info-name">丸美氧气泡泡精华乳90g早买早年轻哟</h2>
                    <p class="info-tip">要点描述副标题，绽放水润光泽绽放细嫩柔滑要点描述副标题， 绽放水润光泽绽放细嫩柔滑要点描述副标题，绽放水润光泽绽放。</p>
                </div>
                <div class="infos-other">
                    <span class="infos-count">限量<em>18</em>份</span>
                    <span class="infos-person">9899人申请</span>
                    <span class="infos-price">￥183.9</span>
                </div>
                <div class="infos-ft">
                    <a class="info-apply" href="" title="试用流程">试用流程</a>
                </div>
            </div>

            <!-- 商品详情 -->
            <div class="detail-box">
                <h3 class="detail-hd"><img src="images/title-detail.png" alt="商品详情"></h3>
                <div class="detail-bd">
                    <p><img src="images/detail-pic.jpg" alt=""></p>
                </div>
            </div>



            <!-- 精选推荐 -->
            <div class="floor-box tj-box">
                <h3 class="floor-hd"><img src="images/title-tj.png" alt="精选推荐"></h3>
                <div class="floor-bd">
                    <!-- 产品1 -->
                    <div class="floor-bd-item">
                        <a class="item-link" href="">
                            <!-- 产品主图 -->
                            <div class="item-view">
                                <img class="item-img" src="images/goods-pic.jpg" alt="">
                            </div>
                            <!-- 产品详情 -->
                            <div class="item-detail">
                                <p class="item-brand">品牌</p>
                                <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                <p class="item-price">
                                    <span class="price-now">¥99.88</span>
                                    <del class="price-old">¥577.02</del>
                                </p>
                                <p class="item-cart">
                                    <span class="iconfont btn btn-car">&#xe60f;</span>
                                </p>
                            </div>
                        </a>
                    </div>

                    <!-- 产品2 -->
                    <div class="floor-bd-item">
                        <a class="item-link" href="">
                            <!-- 产品主图 -->
                            <div class="item-view">
                                <img class="item-img" src="images/goods-pic.jpg" alt="">
                            </div>
                            <!-- 产品详情 -->
                            <div class="item-detail">
                                <p class="item-brand">品牌</p>
                                <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                <p class="item-price">
                                    <span class="price-now">¥99.88</span>
                                    <del class="price-old">¥577.02</del>
                                </p>
                                <p class="item-cart">
                                    <span class="iconfont btn btn-car">&#xe60f;</span>
                                </p>
                            </div>
                        </a>
                    </div>

                    <!-- 产品3 -->
                    <div class="floor-bd-item">
                        <a class="item-link" href="">
                            <!-- 产品主图 -->
                            <div class="item-view">
                                <img class="item-img" src="images/goods-pic.jpg" alt="">
                            </div>
                            <!-- 产品详情 -->
                            <div class="item-detail">
                                <p class="item-brand">品牌</p>
                                <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                <p class="item-price">
                                    <span class="price-now">¥99.88</span>
                                    <del class="price-old">¥577.02</del>
                                </p>
                                <p class="item-cart">
                                    <span class="iconfont btn btn-car">&#xe60f;</span>
                                </p>
                            </div>
                        </a>
                    </div>

                    <!-- 产品4 -->
                    <div class="floor-bd-item">
                        <a class="item-link" href="">
                            <!-- 产品主图 -->
                            <div class="item-view">
                                <img class="item-img" src="images/goods-pic.jpg" alt="">
                            </div>
                            <!-- 产品详情 -->
                            <div class="item-detail">
                                <p class="item-brand">品牌</p>
                                <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包 COACH 蔻驰 F54008 女士长款钱包</p>
                                <p class="item-price">
                                    <span class="price-now">¥99.88</span>
                                    <del class="price-old">¥577.02</del>
                                </p>
                                <p class="item-cart">
                                    <span class="iconfont btn btn-car">&#xe60f;</span>
                                </p>
                            </div>
                        </a>
                    </div>

                </div>
                <div class="floor-ft">
                    <a class="more" href="" title="查看更多">查看更多...</a>
                </div>
            </div>



            <div class="cart-box">
                <!-- 立即购买 -->
                <a class="cart-hd" href="" title="立即购买">
                <span class="iconfont">&#xe60f;</span>立即购买</a>
                <!-- 申请试用 -->
                <a class="apply-hd" href="" title="申请试用">申请试用</a>
            </div>


        </div>
    </div>



    <script>
        $(function() {
            //头部轮播
            var slideBanner = new Swiper('.banner-box', {
                autoplayDisableOnInteraction: false,
                autoplay: 3000,
                visibilityFullFit: true,
                // loop: true,
                // pagination: '.swiper-pagination'
            });

            // 倒计时
            function checkTime(i){
                if( i<10 ){
                    i = '0' + i;
                }
                return i;
            }

            function showTime() {
            　　var nowtime=new Date(),
            　　　　endtime=new Date('2019/1/1,00:00:00'),//设置结束时间
            　　　　lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
            　　　　d=checkTime(Math.floor(lefttime/(60*60*24))),
            　　　　h=checkTime(Math.floor(lefttime/(60*60)%24)),
            　　　　m=checkTime(Math.floor(lefttime/60%60)),
            　　　　s=checkTime(Math.floor(lefttime%60));
                $('.timer-box p').html('剩余：'+ d + '天' + h + '时' + m + '分' + s+ '秒后结束')
            　　setTimeout(showTime, 1000);
            }
            showTime();

        });
    </script>

</body>

</html>